<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
    <style>
        body{
            height: 100vh;
            width:100vw;
            margin: 0px;
        }
        main{
            display: grid;
            grid-template-rows: 150px auto 400px;
            grid-template-columns: 150px  1000px auto 60px;
            grid-template-areas: "header header header"
                            "topMenu topMenu topMenu"
                            "leftSide main rightSide"
                             "foot foot foot";              
        }
        .header{
            grid-area: header;
            border-bottom: 2px solid rgb(255, 23, 224);
            margin: 0px;
            width: 100vw;
            background-image: url(../erfeng.jpg);
             }
     .ziti{
            font: 80px/80px "华文楷体"; 
            text-align: center;
            padding: 35px;
            color: rgb(252, 253, 251);
        }
        .topMenu{
            grid-area: topMenu;
           
        }
        .leftSide{
            grid-area: leftSide;
            border: 2px solid rgb(247, 65, 177);
            border-left: none;
        }
        .main{
            grid-area: main;
            border: 2px solid rgb(247, 65, 177);
            border-left: none;
            border-right:none;
        }
        .rightSide{
            grid-area: rightSide;
            border: 2px solid rgb(247, 65, 177);
        }
        .foot{
            grid-area: foot;
        }
        .topMenu1,.topMenu2,.topMenu3{
            padding-left: 0px;
        }
        .topMenuImage{
            display:inline-block;
            margin-top: 5px;
            width: 25px;
            height: 25px;
            cursor: pointer;
        }
        .leftSideImage{
            float: right;
            margin-top: 6px;
            width: 15px;
            height: 15px;
            border: 2px solid rgb(247, 65, 177);
            cursor: pointer;
        }
        .jianjie,.shouye,.yanyuan,.daoyan{
            text-decoration: none;
            color: black;
            vertical-align: 2px;
            font-size: 19px;
        }
         .topMenuUl{
             -webkit-margin-start: 3rem;
             -webkit-margin-before:2px;
             -webkit-margin-after:0rem;
         }   
         .topMenuLi{
             float: left;
             list-style: none;
             border-left:2px solid red;
         } 
         .topMenu_li:last-child{
            border-right:2px solid red;
}
         .leftSideUl{
             margin: 3px auto;
             font:bold 16px/30px '宋体';
             width:90px;
             cursor: pointer;
         }
         .leftSideLi{
            background-color:#fdddb3;
            margin-top:2px;
            list-style: none;
         }
         .leftSideLi2{
             text-align: center;
             background-color: antiquewhite;
             margin-top: 2px auto;
             list-style: none;
             width: 90px;
         }
         .leftSideUl2{
            margin: 3px -40px;
             font:bold 16px/30px '幼圆';
         }
    </style>
     <script>
            function init(){       
                let nodes=document.querySelectorAll(".leftSideImage");        
                Array.from(nodes).forEach((item)=>{ 
                    item.addEventListener("click",(event)=>{        
                        let node=event.target.parentNode.nextElementSibling;        
                        if(node.hidden==true){        
                            node.hidden=false;       
                        }else{        
                            node.hidden=true;
                        }
                    },false);  
                });
            }
            window.addEventListener("load",init,false);
        s</script>
</head>
<body>
    <main>
    <header class="header">
        <nav class="ziti">香蜜沉沉烬如霜</nav></header>
        <nav class="topMenu">
        <ul class="topMenuUl">
            <li class="topMenuLi">
        <nav><div class="topMenuImage"></div>
        <a class="shouye" href="#">首页</a></nav>
        </li>
        <li class="topMenuLi">
        <nav><div class="topMenuImage"></div>
            <a class="jianjie" href="#">简介</a></nav>
            </li>
            <li class="topMenuLi">
            <nav><div class="topMenuImage"></div>
                <a class="yanyuan" href="#">演员</a></nav>
                </li>
                <li class="topMenuLi">
                <nav><div class="topMenuImage"></div>
                    <a class="daoyan" href="#">导演</a></nav>
                    </li>
                   
                    </ul>
                </nav>
                <nav class="leftSide">
                    <ul class="leftSideUl">
                        <li class="leftSideLi">旭凤锦蜜 <div class="leftSideImage"></div></li>
                    <ul class="leftSideUl2" hidden>
                          <li class="leftSideLi2">旭凤</li>
                          <li class="leftSideLi2">锦蜜</li>
                          <li class="leftSideLi2">檀越</li>

                    </ul>
                            <li class="leftSideLi">润玉锦蜜<div class="leftSideImage"></div></li>
                        <ul class="leftSideUl2" hidden>
                                <li class="leftSideLi2">润玉</li>
                                <li class="leftSideLi2">锦蜜</li>
                          </ul>
                                <li class="leftSideLi">花神水神<div class="leftSideImage"></div></li>
                            <ul class="leftSideUl2" hidden>
                                    <li class="leftSideLi2">花神</li>
                                    <li class="leftSideLi2">水神</li>
                                    <li class="leftSideLi2">锦蜜</li>         
                              </ul>
                                    <li class="leftSideLi">彦佑锦蜜<div class="leftSideImage"></div></li>
                                <ul class="leftSideUl2" hidden>
                                        <li class="leftSideLi2">彦佑</li>
                                        <li class="leftSideLi2">锦蜜</li>
                                  </ul>
                                  </ul>
                </nav>
                <nav class="main">香蜜沉沉烬如霜有杨紫邓伦主演</nav>
                <nav class="rightSide"></nav>
                <nav class="foot"></nav>
            </main>
</body>
</html>